<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插件表达式</title>
    </head>
    <body>
        <div id="app">
            <span>{{message.split('').reverse().join('')}}</span>
        </div>
        <script src="vue.js"></script>
        <script>
       //在Vue.js中，每一个Vue应用都是通过构造函数Vue来创建的
       //Vue实例其实就是一个普通的JS对象，它会有很多的选项
       var vm = new Vue({
       //el是一个字符串，代表了Vue应用要挂载的HTML元素的选择器
        el:"#app",//el就是element的意思，表示容器的DOM元素，值是一个选择器
        //模板的意思 template是选项对象的一个属性，它用于定义字符串模板
        //template:'<span>{{message}}</span>',
        //data包含了应用需要的数据，一般可是对象，它里面的属性可以在模板里用到
        data:{
            message:'hello',//['h','e','l','l','o']=>['o','l','l','e','h']=>olleh
        }    
       });
       //vm它就是一个普通的JS对象，所以可以访问它身上的属性和方法，也可以改变数据属性的值
       console.log(vm)
       //把vm的属性代理到vm.$data上
       //vm.message = vm.$data.message
       console.log('vm.message',vm.message)
       console.log(Object.getPrototypeOf(vm))
       console.log(vm)
       //当Vue被 创建后，可以使用$data属性直接访问原始的数据对象，
        //并且如果修改的话会触发视图的更新
      /* console.log(vm.message)
       setTimeout(()=>{
        vm.message = 'world'
        //Vue的实例数据是响应式的，当data中的数据发生变化的时候，所有依赖于此数据的视图
        //都会进行更新
        console.log(vm.message)
       },3000);  */
    </script>
    </body>
</html>